<template>
  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <BiFormItem label="用户ID">
          <template slot="content">
            <el-input
              v-model="requestData.id"
              clearable
              placeholder="请输入用户ID"
            />
          </template>
        </BiFormItem>
        <BiFormItem label="用户状态">
          <template slot="content">
            <el-select
              v-model="requestData.status"
              clearable
              placeholder="请选择用户状态"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <miniAppSelect
          v-if="!mini_app_id"
          :is-resize="isResize"
          :multiple="true"
          @result="miniAppResult"
        />
        <BiFormItem label="渠道名称">
          <template slot="content">
            <el-select
              ref="select"
              v-model="requestData.channel_id"
              remote
              clearable
              :remote-method="remoteMethod"
              filterable
              collapse-tags
              multiple
              placeholder="请输入渠道ID/名称"
              @focus="mobileClear"
              @hook:mounted="mobileClear"
              @visible-change="mobileClear"
              @change="onChannelChange"
            >
              <el-option
                v-for="item in channelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>

        <DateSelect
          :default-value="[requestData.reg_start_date,requestData.reg_end_date]"
          label="注册时间"
          :is-resize="isResize"
          @result="resultDate"
        />
        <DateSelect
          label="染色时间"
          :is-resize="isResize"
          @result="resultSeqDate"
        />

        <BiFormItem label="充值金额">
          <template slot="content">
            <BiInput
              v-model="requestData.recharge_amount"
              placeholder="请输入"
            ></BiInput>
          </template>
        </BiFormItem>
        <BiFormItem label="小程序类型">
          <template slot="content">
            <el-select
              v-model="requestData.app_type"
              clearable
              placeholder="请选择小程序类型"
            >
              <el-option
                v-for="item in appTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>

        <BiFormItem>
          <template slot="label">
            <el-tooltip
              class="item"
              effect="dark"
              content="取用户最近一次登录所属系统"
              placement="bottom"
            >
              <span> 用户系统</span>
            </el-tooltip>
          </template>
          <template slot="content">
            <el-select
              v-model="requestData.system_type"
              clearable
              placeholder="请选择用户设备类型"
            >
              <el-option
                v-for="item in systemList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="是否添加客服号">
          <template slot="content">
            <el-select
              v-model="requestData.is_add_customer"
              clearable
              placeholder="请选择小程序类型"
            >
              <el-option
                v-for="item in addCustomerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="充值状态">
          <template slot="content">
            <el-select
              v-model="requestData.recharge_status"
              clearable
              placeholder="请选择充值状态"
            >
              <el-option
                v-for="item in rechargeStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>

        <BiFormItem label="当前是否会员">
          <template slot="content">
            <el-select
              v-model="requestData.is_vip"
              clearable
              placeholder="请选择当前是否会员"
            >
              <el-option
                v-for="item in isVip"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="分销方">
          <template slot="content">
            <selectPlaylet
              type="distributor"
              :is-resize="isResize"
              :reserve="false"
              :autoreset="true"
              :multiple="true"
              @result="distributorResult"
            />
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              :disabled="loading"
              :loading="loading"
              @click="startSearch"
            >查询</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block>
      <tableData
        :table-data="tableData"
        @orderChange="orderChange"
        @resizeList="clickSearch"
      />
    </Block>
    <page
      :page-info="page_info"
      @requestNextPage="requestNextPage"
    />
    <BiDrawer
      v-model="drawer.visible"
      :row="drawer.row"
      :drawer-title="drawer.title"
      :component="drawerComponent.userDetails"
      drawer-size="45%"
      @ok="onSubmit"
    ></BiDrawer>
  </div>
</template>
<script>
import { memberIndex } from '@/api/userPage'
import page from '@/common/component/page.vue'
import BiInput from '@/common/component/form/inputRange.vue'
import BiDrawer from '@/components/BiDrawer'
import { mapState } from 'vuex'
import tableData from './component/userTable.vue'
import userDetails from './component/detailsLayer.vue'
import DateSelect from '@/common/component/form/dateSelect.vue'
import { commonData, appTypeDropdown } from '@/api/common'
import miniAppSelect from '@/common/component/form/miniAppSelect.vue'
export default {
  name: 'UserIndex',
  components: {
    BiDrawer,
    tableData,
    DateSelect,
    miniAppSelect,
    BiInput,
    page
  },
  data() {
    return {
      requestData: {
        id: '',
        mini_app_id: '',
        reg_start_date: this.$moment().subtract('days').format('YYYY-MM-DD'),
        reg_end_date: this.$moment().format('YYYY-MM-DD'),
        channel_id: '',
        seq_start_date: '',
        recharge_amount: [],
        order: '',
        status: '',
        app_type: '',
        field: '',
        distributor_id: '',
        seq_end_date: '',
        system_type: '',
        is_add_customer: -1,
        recharge_status: 0,
        is_vip: 0
      },
      appTypeList: [
        { label: '全部', value: '' },
        { label: '微信小程序', value: '1' },
        { label: '抖音IAP小程序', value: '2' },
        { label: '抖音IAA小程序', value: '3' }
      ],
      statusList: [
        { label: '全部', value: '' },
        { label: '正常', value: 1 },
        { label: '封禁', value: 2 }
      ],
      systemList: [
        { label: '全部', value: '' },
        { label: '安卓', value: 1 },
        { label: 'IOS', value: 2 }
      ],
      addCustomerList: [
        { label: '全部', value: -1 },
        { label: '是', value: 1 },
        { label: '否', value: 0 }
      ],
      rechargeStatus: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '已充值'
        },
        {
          value: 2,
          label: '未充值'
        }
      ],
      isVip: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '是'
        },
        {
          value: 2,
          label: '否'
        }
      ],
      distributorList: [],
      channelList: [],
      isResize: false,
      loading: false,
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      drawerComponent: {
        userDetails: userDetails
      },
      drawer: {
        visible: false,
        title: '新建收到消息回复',
        row: {}
      },
      tableData: []
    }
  },
  computed: {
    ...mapState('user', ['miniAppList', 'mini_app_id'])
  },
  mounted() {
    console.log(this.$store.state.user.mini_app_id, '12312', window.localStorage.getItem('mini_app_id'))
    this.initData()
    this.onGetAppTypeList()
    this.$AccessReport.report('zhangyu-user', [this.$store.state.user.routerItem.name, '用户管理'])
  },
  methods: {
    distributorResult(value) {
      this.requestData.distributor_id = value
    },
    async onGetAppTypeList() {
      const res = await appTypeDropdown()
      if (res.status_code == 1) {
        this.appTypeList = [{ label: '全部', value: '' }, ...res.data]
      }
    },
    // 执行这个重新获取焦点的方法 就可以了
    mobileClear(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { select } = this.$refs
            const input = select.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    initData() {
      this.clickSearch()
      this.requestDistributor()
    },
    miniAppResult(value) {
      this.requestData.mini_app_id = value
    },
    startSearch() {
      this.page_info.page = 1
      this.clickSearch()
    },
    orderChange(order) {
      console.log(order, '123')
      if (order === 'ascending') {
        this.requestData.order = 'asc'
      } else if (order === 'descending') {
        this.requestData.order = 'desc'
      } else {
        this.requestData.order = ''
        this.requestData.field = ''
      }
      this.clickSearch()
    },
    requestDistributor() {
      commonData({ type: 'distributor' }).then((res) => {
        this.distributorList = res.data.data
        // this.distributorList.unshift({ label: '全部', value: '' })
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        commonData({ type: 'channel', value: query, mini_app_id: localStorage.getItem('mini_app_id') ? localStorage.getItem('mini_app_id') : '' }).then((res) => {
          this.channelList = res.data.data
          this.channelList.unshift({
            label: '全选',
            value: '000'
          })
        })
      }
    },
    onChannelChange(value) {
      console.log(value)
      const activeList = []
      const allIndex = this.requestData.channel_id.indexOf('000')
      if (value.indexOf('000') != -1) {
        this.channelList.map((item) => {
          item.value != '000' ? activeList.push(item.value) : null
        })
        this.requestData.channel_id.splice(allIndex, 0)
        this.requestData.channel_id = activeList
      }
    },
    resultDate(value) {
      this.requestData.reg_start_date = value.start_date
      this.requestData.reg_end_date = value.end_date
    },
    resultSeqDate(value) {
      this.requestData.seq_start_date = value.start_date
      this.requestData.seq_end_date = value.end_date
    },
    requestNextPage(pageInfo) {
      this.page_info.page = pageInfo.page
      this.clickSearch()
    },
    clickSearch() {
      const data = {
        id: this.requestData.id,
        mini_app_id: this.requestData.mini_app_id,
        reg_start_date: this.requestData.reg_start_date,
        reg_end_date: this.requestData.reg_end_date,
        order: this.requestData.order,
        channel_id: this.requestData.channel_id,
        field: this.requestData.field,
        status: this.requestData.status,
        app_type: this.requestData.app_type,
        total_amount_min: this.requestData.recharge_amount[0] || '',
        total_amount_max: this.requestData.recharge_amount[1] || '',
        seq_start_date: this.requestData.seq_start_date,
        seq_end_date: this.requestData.seq_end_date,
        distributor_id: this.requestData.distributor_id,
        system_type: this.requestData.system_type,
        is_add_customer: this.requestData.is_add_customer,
        recharge_status: this.requestData.recharge_status,
        is_vip: this.requestData.is_vip
      }
      if (this.requestData.recharge_amount[0] || this.requestData.recharge_amount[1]) {
        data.field = 'total_amount'
      } else {
        data.field = 'total_amount'
        if (data.order === '') {
          data.field = ''
        }
      }
      this.loading = true
      memberIndex({ ...data, ...this.page_info }).then((res) => {
        this.loading = false
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.page_info = res.data.page_info
        }
      })
    },
    reset() {
      this.$set(this, 'requestData', {
        id: '',
        mini_app_id: '',
        reg_start_date: this.$moment().subtract(3, 'days').format('YYYY-MM-DD'),
        reg_end_date: this.$moment().format('YYYY-MM-DD'),
        channel_id: '',
        seq_start_date: '',
        field: '',
        recharge_amount: [],
        order: '',
        status: '',
        app_type: '',
        distributor_id: '',
        seq_end_date: ''
      })
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 2000)
      this.$set(this, 'page_info', {
        page: 1,
        page_size: 20,
        total: 0
      })
    },
    add(title) {
      this.drawer.title = title
      this.drawer.row = {}
      this.drawer.visible = true
    },
    edit(row) {
      this.drawer.title = '编辑'
      this.drawer.row = row
      this.drawer.visible = true
    },
    onSubmit(data) {
      auto_reply_save(data).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
        }
      })
    }
  }
}
</script>
  <style lang="scss" scoped>
::v-deep .el-tag.el-tag--info.el-tag--mini.el-tag--light {
  max-width: 130px !important ;
}
::v-deep .search-form .el-select__tags {
  max-width: 220px !important;
}
.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }
}
</style>
